<template>
  <div class="CustomCom_v">
    <block-box
      width="30%"
      height="300px"
      title="CSS文字溢出显示省略号,且出现el-tooltip"
    >
      <template #content>
        1.px 格式
        <beyond-width-tip
          width="250px"
          text="px 格式-->CSS文字溢出显示省略号,且出现el-tooltip"
        ></beyond-width-tip>
        2.% 格式
        <beyond-width-tip
          width="80%"
          text="% 格式-->CSS文字溢出显示省略号,且出现el-tooltip"
        ></beyond-width-tip>
        3.tip 宽度换行 px
        <beyond-width-tip
          width="80%"
          wrap-width="200px"
          text="tip(px)宽度超出自定义的宽度进行换行-->CSS文字溢出显示省略号,且出现el-tooltip"
        ></beyond-width-tip>
        4.tip 宽度换行  %
        <beyond-width-tip
          width="80%"
          wrap-width="50%"
          text="tip(%)宽度超出自定义的宽度进行换行-->CSS文字溢出显示省略号,且出现el-tooltip"
        ></beyond-width-tip>
      </template>
    </block-box>
    <block-box
      width="30%"
      height="300px"
      title="自定义下拉树：vxe-pulldown/el-tree"
    >
      <template #content>
        <el-form :model="form"
                 label-width="50px"
                 size="small">
          <el-form-item label="分组" prop="groups">
            <custom-select-tree
              :model-value="form.groups"
              placeholder="请选择分组信息"
              @get-checked-keys="getCheckedKeys"
              @get-checked-nodes="getCheckedNodes"></custom-select-tree>
          </el-form-item>
          <div>选中keys:{{ form.groups }}</div>
          <div>选中的nodes：{{ checkedNodes }}</div>
        </el-form>
      </template>
    </block-box>
    <block-box
      width="30%"
      height="300px"
      title="单表单项校验多项"
    >
      <template #content>
        <el-form :model="form"
                 :rules="rules" ref="form"
                 label-width="80px"
                 size="mini"
                 class="demo-form">
          <el-form-item label="分组" prop="groups">
            <custom-select-tree
              :model-value="form.groups"
              placeholder="请选择分组信息"
              @get-checked-keys="getCheckedKeys"
              @get-checked-nodes="getCheckedNodes"></custom-select-tree>
          </el-form-item>
          <el-form-item label="数据频率" prop="frequency">
            <el-input v-model="form.frequency" style="width: 60px;"></el-input>
            次/
            <el-input v-model="form.frequencyMinute"
                      style="width: 60px;" ref="frequencyMinute"></el-input>
            分钟
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('form')">立即创建</el-button>
            <el-button @click="resetForm('form')">重置</el-button>
          </el-form-item>
        </el-form>
      </template>
    </block-box>
    <block-box
        width="30%"
        height="300px"
        title="render函数使用"
    >
      <template #content>
        <custom-render :renderFn="renderFn"></custom-render>
        <div>
          {{renderStr}}
        </div>
      </template>
    </block-box>
  </div>
</template>

<script>

var customRender = {
  props: {
    renderFn: {
      type: Function
    }
  },
  data() {
    return {
    }
  },
  render(h) {
    return this.renderFn.call(this, h)
  }
}

import BlockBox from "@/components/BlockBox";
import BeyondWidthTip from "@/components/BeyondWidthTip";
import CustomSelectTree from "@/components/CustomSelectTree";

export default {
  name: "CustomCom",
  components: { CustomSelectTree, BeyondWidthTip, BlockBox, customRender },
  props: {},
  data() {
    return {
      renderFn: function (h) {
        return h("div", {className: "app"}, [
          h("h2", {className: "title"}, "我是标题"),
          h("p", null, "我是内容"),
          h('el-button', {
            props: {
              type: 'success',
              size: 'small',
            },
            style: {
            },
            on: {
              click: function (v) {
                alert('点击了按钮')
              }
            }
          }, '点击按钮')
        ])
      },
      form: {
        groups: [],
        frequency: "",
        frequencyMinute: ""
      },
      checkedNodes: [],
      rules: {
        groups: [
          { required: true, message: "请选择分组", trigger: "change" }
        ],
        frequency: [
          { required: true, trigger: "change", validator: this.validateFrequency }
        ]
      },
      long_tip: '<span style="color: red;cursor: pointer" onclick="viewList()">查看同步文件列表</span>,这里是一段可能会超长的文本内容，需要显示为超出3行时用省示完整内容。',
      renderStr: ''
    };
  },
  methods: {
    validateFrequency: function(rule, value, callback) {
      let minutes = this.$refs.frequencyMinute.value;
      value = Number(value);
      minutes = Number(minutes);
      if (!value || !minutes) {
        callback(new Error("不能为空"));
      }
      var reg = /^[1-9]\d*$/;
      if (!reg.test(value) || !reg.test(minutes)) {
        callback(new Error("请输入非零正整数"));
      } else {
        if (value > 1440 || minutes > 1440) {
          callback(new Error("数值不能大于1440"));
        } else {
          callback();
        }
      }
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log("form", this.form);
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    getCheckedKeys: function(v) {
      this.form.groups = v;
    },
    getCheckedNodes: function(v) {
      this.checkedNodes = v;
    }
  },
  watch: {},
  mounted() {
  }
};
</script>
<style scoped lang="less">
.CustomCom_v {
  width: 100%;
  height: 100%;
  overflow: auto;
  display: flex;
}
</style>